<template>
    <div class="content">
        <ul class="el-menu-bar">
   
        <li class="menu" v-for="(menu,index) in menuList" :class="`menu_${menu.class}`"  v-bind:key=menu.id 
        v-on:click="selectTab(index)"  @contextmenu.prevent="openMenu($event,item)">
          {{ menu.name }}
          <div class="layui-icon-close" v-on:click="closeTab(menu,index)" :title="`点击关闭-${menu.name}`">×</div>
        </li>
      </ul>
      <div class="el-menu-view" v-for="menu in menuList" :class="menu.class" v-bind:key=menu.index>
        <iframe frameborder="0" :src="`/sortSys#${menu.url}`" ></iframe>
      </div>
    </div>
 

    <!--  <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
     <li v-if="rightClickItem.fileType==99" @click="handleClickFolder(rightClickItem)">打开</li>
      <li @click="handleDelete(rightClickItem)">删除</li>
      <li @click="handleDownloadFile(rightClickItem)" v-if="rightClickItem.fileType!=99">下载</li>
      <li @click="handlePreviewFile(rightClickItem)" v-if="rightClickItem.fileType!=99">预览</li>
      <li @click="handleUpdate(rightClickItem)">编辑</li>  
      <li> 关闭</li>
     </ul>-->

</template>
<script>

export default {
    name:'menuView',
    props:{menus:{type:Array},
    setMDListShow: {
        type: Function,
        default: null
      }},
    data(){
      return{
        // menuList:this.menus,
            menuList:this.menus,
            // 控制右键 菜单功能
            left:0,
            top:0,
            visible :false
      }
    },
    methods:{
      selectTab(index){
        // 选择顶部菜单
        this.menuList[index].class='active'
        for(let i=0;i< this.menuList.length;i++){
            let menu = this.menuList[i];
            if(i != index){
                menu.class='none';
            }
        }
        this.$forceUpdate();
  
        this.setMDListShow(this.menuList[index]);
        // this.$parent.$parent.setMDListShow(this.menuList[index]);

        // console.log('扫码回车绑定',this.inTiaoma)
      },
      closeTab(menu,index){
        // 关闭菜单
        // this.$refs.saomaInput.focus()
        console.log(this.menuList);
        console.log(index);
        // 设置下一个节点显示 
        let nextIndex ;
        if(index==this.menuList.length-1){
          nextIndex = index -1;
        }else{
          nextIndex = index+1;
        }
        if(nextIndex >= 0 && menu.class=="active"){
          this.menuList[nextIndex].class="active";
        }
        
        this.menuList.splice(index,1);
      },
      updateView(){
        this.$forceUpdate();
      },
      openMenu(e, item) {
      this.rightClickItem = item;

      var x = e.pageX;
      var y = e.pageY;

      this.top = y;
      this.left = x;
      
      this.visible = true;
    },
    closeMenu() {
      this.visible = false;
    },
  //   watch: {
  //   visible(value) {
  //     if (value) {
  //       document.body.addEventListener('click', this.closeMenu)
  //     } else {
  //       document.body.removeEventListener('click', this.closeMenu)
  //     }
  //   }
  // }

    },

    mounted(){
      // 进入页面让input聚焦
      

    }
}
</script>
<style scoped>
.content{
  width:100%;
  height: 100%;
}
.el-menu-bar{
  width: 100%;
  height: 4px;
  left: 0;
    height: 40px;
    white-space: nowrap;
    font-size: 0;

    background-color: #f2f2f2;
  float: left;
}
.menu{
  width: 120px;
  text-align: center;
  font-weight: bolder;
  cursor:pointer;
      color: #3375d7 !important;
  height: 100%;
  position:relative;
  display: inline-block;
     vertical-align: middle;
    font-size: 14px;
    transition: all .2s;
    -webkit-transition: all .2s;
    position: relative;
    line-height: 40px;
    min-width: 65px;
    padding: 0 15px;
    text-align: center;
    cursor: pointer;
}
.menu:hover{
   font-size: 15px;
    font-weight: bold;
}
.layui-icon-close {
    font-family: layui-icon;
    font-style: normal;
    width: 15px;
    height: 15px;
    line-height: 15px;
    position:absolute;
    top:0px;
    right:15px;
    border-radius: 2px;
}
.layui-icon-close:hover{
  font-size: 20px;
  font-weight: bold;
  background:#dddddd44;
}

.menu_active{
 font-size: 14px;
 background-color: #fff;
  font-weight: bold;
}
.menu_none{
  font-size: 14px;
}
.el-menu-view{
  width: 100%;
  margin-top: 5px;
  height: calc(100% - 55px);
  float: left;
}
.el-menu-view iframe{
  width: 100%;
  height: 100%;
  float: left;
}
.active{
  display: block;
}
.none{
  display: none;
}
.contextmenu {
  margin: 0;
  background: #fff;
  z-index: 3000;
  position: absolute;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
}
.contextmenu li {
  margin: 0;
  padding: 7px 16px;
  cursor: pointer;
}

.contextmenu li:hover {
  background: #eee;
}

</style>